<h2 class="page-title">工程管理</h2>
<hr>

<div class="flex-div" style="padding-top: 1rem">
  <div class="flex-1">
    <button nz-button [nzType]="'primary'" class="project-btn" (click)="show_new()" >
      <span>新建项目</span>
    </button>
  </div>

  <div class="flex-1">
    <button nz-button [nzType]="'primary'"  [disabled]="_checkedNumber != 1"  class="project-btn" (click)="show_modify()">
      <span>修改项目</span>
    </button>
  </div>

  <div class="flex-1">
    <button [routerLink] = "['/config']" nz-button [nzType]="'primary'"  [disabled]="_checkedNumber != 1"  (click)="pass_id()" class="project-btn">
      <span>配置项目</span>
    </button>
  </div>

  <div class="flex-1">
    <button [routerLink] = "['/layout']" nz-button [nzType]="'primary'"  [disabled]="_checkedNumber != 1" (click)="pass_id()" class="project-btn">
      <span>布局</span>
    </button>
  </div>

  <div class="flex-1">
    <nz-popconfirm [nzTitle]="'确定要删除选中工程吗？'" (nzOnConfirm)="delete_pro()" (nzOnCancel)="cancel_delete()" [nzPlacement]="'bottom'">
      <button nz-button nz-popconfirm [nzType]="'primary'"  [disabled]="_checkedNumber == 0"  class="project-btn" style=" background-color: #ED6B75" >
        <span>删除</span>
      </button>
    </nz-popconfirm>
  </div>


  <div class="flex-1">
    <div class="project-btn import_btn"  >
      <label for="file" style="color: white;position: absolute;top:1rem;left: 0;right: 0;z-index: 8;">导入</label>
      <input type="file" id="file" name="project_file"  (change)="import_project()" >
    </div>
  </div>

  <div style="flex: 1;">
    <button nz-button [nzType]="'primary'"  (click)="export_project()"  class="project-btn" style="background-color: #EBC272">
      <span>导出</span>
    </button>
  </div>

</div>


<div style="padding: 0 2rem">
  <div style="margin: 0.6rem 1rem;font-size: 0.8rem" >&nbsp;<span *ngIf="_checkedNumber">已选择 {{_checkedNumber}} 个项目</span></div>

  <nz-table #nzTable [nzDataSource]="pro_list" [nzPageSize]="10"  (nzDataChange)="_displayDataChange($event)" (nzPageIndexChange)="_refreshStatus()" (nzPageSizeChange)="_refreshStatus()" id="pro_table">
    <thead nz-thead>
    <tr>
      <th nz-th nzCheckbox>
        <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
        </label>
      </th>
      <th nz-th><span>Id</span></th>
      <th nz-th><span>Name</span></th>
      <th nz-th><span>Content</span></th>
      <th nz-th><span>Version</span></th>
      <th nz-th><span>Create Time</span></th>
      <th nz-th><span>Modify Time</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
      <td nz-td nzCheckbox>
        <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
        </label>
      </td>
      <td nz-td>{{data.id}}</td>
      <td nz-td>{{data.name}}</td>
      <td nz-td>{{data.content}}</td>
      <td nz-td>{{data.version}}</td>
      <td nz-td>{{data.c_time*1000 |  date:'yyyy-MM-dd HH:mm:ss'}}</td>
      <td nz-td>{{data.m_time*1000 |  date:'yyyy-MM-dd HH:mm:ss'}}</td>
    </tr>
    </tbody>
  </nz-table>
</div>


<nz-modal [nzVisible]="is_new" [nzTitle]="'新建项目'" [nzContent]="newpro" (nzOnCancel)="cancel_add()" (nzOnOk)="add_pro()" class="project-modal" >
  <ng-template #newpro>
    <div nz-row class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">项目名称:</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_project.name" ></nz-input></div>
    </div>
    <!--<div nz-row class="form-row">-->
      <!--<div nz-col [nzLg]="{ span: 6}"><label  class="label-name">这不科学:</label></div>-->
      <!--<div nz-col [nzLg]="{ span: 16}"><nz-input [(ngModel)]="inputValue" [nzPlaceHolder]="'Basic usage'" (ngModelChange)="_console($event)"></nz-input></div>-->
    <!--</div>-->
    <!---->
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">项目简介</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input  [(ngModel)]="new_project.content">{{new_project.content}}</nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">版本号</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input  [(ngModel)]="new_project.version">{{new_project.version}}</nz-input></div>
    </div>
  </ng-template>
</nz-modal>



<nz-modal [nzVisible]="is_modify" [nzTitle]="'修改项目'" [nzContent]="modify" (nzOnCancel)="cancel_modify($event)" (nzOnOk)="modify_pro($event)" class="project-modal"  >
  <ng-template #modify>
    <div nz-row class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">项目名称:</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.name"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">项目简介</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.content"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">版本号</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.version"></nz-input></div>
    </div>
  </ng-template>
</nz-modal>
